<script src="@/js/gongju/qimenpaipan.js"></script>

<template>

  <div id="app" class="qimenpaipan">
    <div class="margins">

      <!-- 面包屑导航 -->
      <el-affix :offset="80">
        <div class="navigation">
          <Breadcrumb separator=">">
            <BreadcrumbItem to="/">
              <Icon type="ios-home" />
              首页
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-color-wand" />
              工具
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-pin" />
              奇门排盘
            </BreadcrumbItem>
          </Breadcrumb>
        </div>

        <!-- 更多工具 -->
        <div class="prediction">
          更多工具：
          <span class="spacing">
            <router-link to="/gongju/bazi">
              八字排盘
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
          <span class="spacing">
            <router-link to="/gongju/liuyao">
              六爻起卦
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
          <span>
            <router-link to="/gongju/meihuayishu">
              梅花易数起卦
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
        </div>

        <!-- 分割线 -->
        <div class="divider">
          <el-divider />
        </div>
      </el-affix>

      <!-- 数据 -->
      <div v-if="!dataDStatus">
        <el-empty description="努力加载中">
          <Button v-if="reLoadingButton" @click="starts(true)" class="reLoading-button">重新加载</Button>
          <Button v-else loading class="reLoading-button">加载中...</Button>
        </el-empty>
      </div>
      <div v-if="dataDStatus">

        <!-- ★未排盘 -->
        <div v-show="!dataStatus">
          <el-row :gutter="10">

            <!-- 十二时辰按钮 -->
            <el-col :span="6">
              <el-card shadow="always" class="shichen">

                <div class="date">
                  <div>
                    公历：
                    {{ year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + second + '秒' }}
                  </div>
                  <div>
                    农历：
                    {{ nowLunarStr }}
                  </div>
                </div>

                <div class="shichen" v-if="twelveHours && twelveHours.length !== 0">
                  <span v-for="index in twelveHours.length" :key="index">
                    <span v-if="twelveHours[index - 1] === nowDayHourGanZhi">
                      <el-button class="yes" @click="setHourStarts(twelveHoursProve[index - 1].time)">
                        <span class="title">{{ twelveHours[index - 1] }}</span>
                      </el-button>
                    </span>
                    <span v-else>
                      <el-button class="no" @click="setHourStarts(twelveHoursProve[index - 1].time)">
                        <span class="title">{{ twelveHours[index - 1] }}</span>
                      </el-button>
                    </span>
                  </span>
                </div>

              </el-card>
            </el-col>

            <!-- 默认排盘数据 -->
            <el-col :span="9">
              <el-card shadow="always" class="default">

                <div class="jgg">

                  <div class="mark">
                    <div>
                      <el-tag type="primary">{{ dataD.paiPanMark }}</el-tag>
                    </div>
                    <div class="date">
                      <el-tag type="info">
                        <span>公历{{ dataD.solarStr }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>农历{{ dataD.lunarStr }}</span>
                      </el-tag>
                    </div>
                  </div>

                  <!-- 转盘 -->
                  <div class="big" style="" v-if="dataD.paiPanType === 0">
                    <div class="small" v-for="index in 9">
                      <div>
                        <div class="yiKong">
                          <b class="yiMa">{{ dataD.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                          <b class="xunKong">{{ dataD.liuJiaXunKongGongMark[jgw[index - 1] - 1] }}</b>
                        </div>
                      </div>
                      <div>
                        <span class="core" v-if="index !== 5">
                          {{ dataD.shenPan[jgw[index - 1] - 1].substring(1, 2) }}
                        </span>
                        <span class="status" v-if="index !== 5">
                          {{ dataD.baShenLuoGongStatus[jgw[index - 1] - 1][1] }}
                        </span>
                      </div>
                      <div>
                        <div class="dun">
                          {{ dataD.jiuDun[jgw[index - 1] - 1].join('') }}
                        </div>
                      </div>
                      <div>
                        <div class="core">
                          {{ dataD.tianPanQiYiToTq[jgw[index - 1] - 1] }}
                        </div>
                        <div class="status">
                          {{ dataD.tianPanQiYiLuoGongToTqLink[jgw[index - 1] - 1][0][1] }}
                        </div>
                        <div class="status">
                          {{ dataD.tianPanQiYiLuoGongToTqLink[jgw[index - 1] - 1][1][1] }}
                        </div>
                      </div>
                      <div>
                        <div class="core">
                          <span v-if="dataD.tianPan[jgw[index - 1] - 1] !== '芮禽'">
                            <div>{{ dataD.tianPan[jgw[index - 1] - 1].substring(1, 2) }}</div>
                          </span>
                          <span v-else>
                            <div>芮</div>
                          </span>
                        </div>
                        <div class="status">
                          <span v-if="dataD.tianPan[jgw[index - 1] - 1] !== '芮禽'">
                            {{ dataD.jiuXingLuoGongStatus[jgw[index - 1] - 1][1] }}
                          </span>
                          <span class="qin" v-else>禽</span>
                        </div>
                        <div class="status" v-if="dataD.tianPan[jgw[index - 1] - 1] === '芮禽'">
                          {{ dataD.jiuXingLuoGongStatus[jgw[index - 1] - 1][1].substring(0, 1) }}
                        </div>
                      </div>
                      <div>
                        <div class="core" v-if="index !== 5">
                          {{ dataD.tianPanQiYiExTq[jgw[index - 1] - 1] }}
                        </div>
                        <div class="status">
                          {{ dataD.tianPanQiYiLuoGongExTqLink[jgw[index - 1] - 1][0][1] }}
                        </div>
                        <div class="status">
                          {{ dataD.tianPanQiYiLuoGongExTqLink[jgw[index - 1] - 1][1][1] }}
                        </div>
                      </div>
                      <div class="items marki">
                        <span :class="jgs[index - 1]">
                          {{ jgm[index - 1] }}
                        </span>
                      </div>
                      <div>
                        <div class="core">
                          {{ dataD.renPan[jgw[index - 1] - 1].substring(0, 1) }}
                        </div>
                        <div class="status">
                          {{ dataD.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                        </div>
                      </div>
                      <div>
                        <div class="core">
                          {{ dataD.diPan[jgw[index - 1] - 1] }}
                        </div>
                        <div class="status">
                          {{ dataD.diPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                        </div>
                        <div class="status">
                          {{ dataD.diPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 飞盘 -->
                  <div class="big" style="" v-if="dataD.paiPanType === 1">
                    <div class="small" v-for="index in 9">
                      <div>
                        <div class="yiKong">
                          <b class="yiMa">{{ dataD.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                          <b class="xunKong">{{ dataD.liuJiaXunKongGongMark[jgw[index - 1] - 1] }}</b>
                        </div>
                      </div>
                      <div>
                        <span class="core">
                          {{ dataD.shenPan[jgw[index - 1] - 1].substring(1, 2) }}
                        </span>
                        <span class="status">
                          {{ dataD.jiuShenLuoGongStatus[jgw[index - 1] - 1][1] }}
                        </span>
                      </div>
                      <div>
                        <div class="dun">
                          {{ dataD.jiuDun[jgw[index - 1] - 1].join('') }}
                        </div>
                      </div>
                      <div></div>
                      <div>
                        <div class="core">
                          {{ dataD.tianPan[jgw[index - 1] - 1].substring(1, 2) }}
                        </div>
                        <div class="status">
                          {{ dataD.jiuXingLuoGongStatus[jgw[index - 1] - 1][1] }}
                        </div>
                      </div>
                      <div>
                        <div class="core">
                          {{ dataD.tianPanQiYi[jgw[index - 1] - 1] }}
                        </div>
                        <div class="status">
                          {{ dataD.tianPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                        </div>
                        <div class="status">
                          {{ dataD.tianPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                        </div>
                      </div>
                      <div class="items marki">
                        <span :class="jgs[index - 1]">
                          {{ jgm[index - 1] }}
                        </span>
                      </div>
                      <div>
                        <div class="core">
                          {{ dataD.renPan[jgw[index - 1] - 1].substring(0, 1) }}
                        </div>
                        <div class="status">
                          {{ dataD.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                        </div>
                      </div>
                      <div>
                        <div class="core">
                          {{ dataD.diPan[jgw[index - 1] - 1] }}
                        </div>
                        <div class="status">
                          {{ dataD.diPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                        </div>
                        <div class="status">
                          {{ dataD.diPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </el-card>
            </el-col>

            <!-- 选项 -->
            <el-col :span="9">
              <el-card shadow="never" class="option">
                <div>
                  <input placeholder="请输入姓名（选填）" v-model="name" maxlength="30" class="name" />
                  <el-radio v-model="sex" v-for="item in sexOptions" :label="item.label" :key="item" class="sex">
                    {{ item.value }}
                  </el-radio>
                </div>
                <div>
                  <input placeholder="请输入占事（选填）" v-model="occupy" maxlength="30" class="occupy" />
                  <el-checkbox class="leap-month" :disabled="dateType !== 1" v-model="leapMonth"> 闰月 </el-checkbox>
                </div>
                <div class="date">
                  <el-date-picker :clearable="false" v-model="date" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择日期" style="width: 50%;" />
                  <el-radio-group class="date-type" v-model="dateType">
                    <el-radio-button v-for="item in dateTypeOptions" :label="item.label" :key="item">
                      {{ item.value }}
                    </el-radio-button>
                  </el-radio-group>
                </div>
                <!-- <div>
                  <el-checkbox v-model="trueSolar"> 真太阳时 </el-checkbox>
                  <span class="address" v-show="trueSolar">
                    地区：
                    <City class="city" v-model="address" show-suffix @on-change="getAddressName" />
                    <el-tooltip placement="top">
                      <template #content>
                        默认为北京市，依然按照标准时间排盘；
                        <br />
                        若选择其他地区，则按真太阳时排盘。
                      </template>
<Icon type="md-information-circle" />
</el-tooltip>
</span>
</div> -->
                <div class="paipan-type">
                  <div class="title">排盘类型：</div>
                  <el-radio class="select" v-model="paiPanType" v-for="item in paiPanTypeOptions" :label="item.label"
                    :key="item.value">
                    {{ item.value }}
                  </el-radio>
                </div>
                <div class="qimen-type">
                  <div class="title">奇门类型：</div>
                  <el-select class="select" v-model="qiMenType">
                    <el-option v-for="item in qiMenTypeOptions" :label="item.label" :value="item.value" :key="item"
                      :disabled="item.disabled">
                      <span style="float: left">{{ item.label }}</span>
                      <span v-if="item.value === 3"
                        style="float:right; color:#8492a6;font-size:12px;margin-right:-15px;">
                        <Icon type="md-arrow-dropleft-circle" /> 默认
                      </span>
                    </el-option>
                  </el-select>
                  <el-tooltip placement="top">
                    <template #content>
                      <div><b>年家奇门：</b>主要用于整体的判断，较为宏观和长久。如：经济、形式、东南西北各方的发展状况及自然灾害等。</div>
                      <div><b>月家奇门：</b>主要用来预测一个月内所发生的事。如：考试、外出做官、经商出行以及玄空风水等方面。</div>
                      <div><b>日家奇门：</b>可以预测一天内所发生的事。如：日常生活中的各种事件，从小事到大事等。</div>
                      <div><u><b>时家奇门：</b>可以预测每个时辰发生的事，应用最为广泛。如：婚姻、疾病、工作、求学考试、经营求财、官司诉讼等。</u></div>
                      <div><b>刻家奇门：</b>是在年家奇门、月家奇门、日家奇门、时家奇门的基础上延伸而成，结果相对来说更为精确。</div>
                    </template>
                    <Icon class="tip" type="md-information-circle" />
                  </el-tooltip>
                </div>
                <div class="paipan-system">
                  <div class="title">排盘方法：</div>
                  <el-select class="select" v-model="paiPanSystem">
                    <el-option v-for="item in paiPanSystemOptions" :label="item.label" :value="item.value" :key="item"
                      :disabled="item.disabled">
                      <span style="float: left">{{ item.label }}</span>
                      <span v-if="item.value === 0"
                        style="float:right; color:#8492a6;font-size:12px;margin-right:-15px;">
                        <Icon type="md-arrow-dropleft-circle" /> 默认
                      </span>
                    </el-option>
                  </el-select>
                </div>
                <div class="res">
                  <div class="resetting" @click="resetting">
                    <Icon type="md-sync" />
                    <span>重置</span>
                  </div>
                  <div class="senior" @click="seniorDialog = true">
                    <Icon type="ios-settings" />
                    <span>高级选项</span>
                  </div>
                </div>
                <div>
                  <Button v-if="!startsButton" style="width: 100%" class="starts" @click="starts(false)">开始排盘</Button>
                  <Button v-else loading style="width: 100%" class="starts">排盘中...</Button>
                </div>
              </el-card>
            </el-col>

          </el-row>
        </div>

        <!-- ★已排盘 -->
        <div v-show="dataStatus">
          <div class="return" @click="dataStatus = false">
            返回排盘
          </div>

          <el-row :gutter="10">

            <!-- 十二时辰按钮 -->
            <el-col :span="6">
              <el-card shadow="always" class="shichen" style="border-radius: 20px; height: 500px;">

                <div class="date">
                  <div>
                    公历：
                    {{ year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + second + '秒' }}
                  </div>
                  <div>
                    农历：
                    {{ nowLunarStr }}
                  </div>
                </div>

                <div class="shichen" v-if="twelveHours && twelveHours.length !== 0">
                  <span v-for="index in twelveHours.length" :key="index">
                    <span v-if="twelveHours[index - 1] === nowDayHourGanZhi">
                      <el-button class="yes" @click="setHourStarts(twelveHoursProve[index - 1].time)">
                        <span class="title">{{ twelveHours[index - 1] }}</span>
                      </el-button>
                    </span>
                    <span v-else>
                      <el-button class="no" @click="setHourStarts(twelveHoursProve[index - 1].time)">
                        <span class="title">{{ twelveHours[index - 1] }}</span>
                      </el-button>
                    </span>
                  </span>
                </div>

              </el-card>
            </el-col>

            <!-- 九宫格 -->
            <el-col :span="9">
              <el-card shadow="always" class="jgg">
                <!-- 转盘 -->
                <div v-if="data.paiPanType === 0">
                  <!-- 详细模式 -->
                  <div class="detailed">
                    <div class="big" v-show="jggMode">
                      <div class="small" v-for="index in 9" :key="index" @click="switchLuoGong(jgw[index - 1])">
                        <div>
                          <div class="yiKong">
                            <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                            <b class="xunKong">{{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1] }}</b>
                          </div>
                        </div>
                        <div>
                          <span class="core" v-if="index !== 5">
                            {{ data.shenPan[jgw[index - 1] - 1].substring(1, 2) }}
                          </span>
                          <span class="status" v-if="index !== 5">
                            {{ data.baShenLuoGongStatus[jgw[index - 1] - 1][1] }}
                          </span>
                        </div>
                        <div>
                          <div class="dun" v-if="data.jiuDun">
                            {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.tianPanQiYiToTq[jgw[index - 1] - 1] }}
                          </div>
                          <div class="status">
                            {{ data.tianPanQiYiLuoGongToTqLink[jgw[index - 1] - 1][0][1] }}
                          </div>
                          <div class="status">
                            {{ data.tianPanQiYiLuoGongToTqLink[jgw[index - 1] - 1][1][1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            <span v-if="data.tianPan[jgw[index - 1] - 1] !== '芮禽'">
                              <div>{{ data.tianPan[jgw[index - 1] - 1].substring(1, 2) }}</div>
                            </span>
                            <span v-else>
                              <div>芮</div>
                            </span>
                          </div>
                          <div class="status">
                            <span v-if="data.tianPan[jgw[index - 1] - 1] !== '芮禽'">
                              {{ data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1] }}
                            </span>
                            <span class="qin" v-else>禽</span>
                          </div>
                          <div class="status" v-if="data.tianPan[jgw[index - 1] - 1] === '芮禽'">
                            {{ data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1].substring(0, 1) }}
                          </div>
                        </div>
                        <div>
                          <div class="core" v-if="index !== 5">
                            {{ data.tianPanQiYiExTq[jgw[index - 1] - 1] }}
                          </div>
                          <div class="status">
                            {{ data.tianPanQiYiLuoGongExTqLink[jgw[index - 1] - 1][0][1] }}
                          </div>
                          <div class="status">
                            {{ data.tianPanQiYiLuoGongExTqLink[jgw[index - 1] - 1][1][1] }}
                          </div>
                        </div>
                        <div class="marki">
                          <span :class="jgs[index - 1]">
                            {{ jgm[index - 1] }}
                          </span>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.renPan[jgw[index - 1] - 1].substring(0, 1) }}
                          </div>
                          <div class="status">
                            {{ data.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.diPan[jgw[index - 1] - 1] }}
                          </div>
                          <div class="status">
                            {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                          </div>
                          <div class="status">
                            {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 精简模式 -->
                  <div class="reduce">
                    <div class="big" v-show="!jggMode">
                      <div class="small" v-for="index in 9" :key="index" @click="switchLuoGong(jgw[index - 1])">
                        <div>
                          <div class="yiKong">
                            <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                            <b class="xunKong">{{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1] }}</b>
                          </div>
                        </div>
                        <div>
                          <span class="core" v-if="index !== 5">
                            {{ data.shenPan[jgw[index - 1] - 1] }}
                          </span>
                        </div>
                        <div>
                          <div class="dun" v-if="data.jiuDun">
                            {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.tianPanQiYiToTq[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.tianPan[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core" v-if="index !== 5">
                            {{ data.tianPanQiYiExTq[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div class="marki">
                          <span :class="jgs[index - 1]">
                            {{ jgm[index - 1] }}
                          </span>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.renPan[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.diPan[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 飞盘 -->
                <div v-if="data.paiPanType === 1">
                  <!-- 详细模式 -->
                  <div class="detailed">
                    <div class="big" v-show="jggMode">
                      <div class="small" v-for="index in 9" :key="index" @click="switchLuoGong(jgw[index - 1])">
                        <div>
                          <div class="yiKong">
                            <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                            <b class="xunKong">{{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1] }}</b>
                          </div>
                        </div>
                        <div>
                          <span class="core">
                            {{ data.shenPan[jgw[index - 1] - 1].substring(1, 2) }}
                          </span>
                          <span class="status">
                            {{ data.jiuShenLuoGongStatus[jgw[index - 1] - 1][1] }}
                          </span>
                        </div>
                        <div>
                          <div class="dun" v-if="data.jiuDun">
                            {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                          </div>
                        </div>
                        <div></div>
                        <div>
                          <div class="core">
                            {{ data.tianPan[jgw[index - 1] - 1].substring(1, 2) }}
                          </div>
                          <div class="status">
                            {{ data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.tianPanQiYi[jgw[index - 1] - 1] }}
                          </div>
                          <div class="status">
                            {{ data.tianPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                          </div>
                          <div class="status">
                            {{ data.tianPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                          </div>
                        </div>
                        <div class="marki">
                          <span :class="jgs[index - 1]">
                            {{ jgm[index - 1] }}
                          </span>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.renPan[jgw[index - 1] - 1].substring(0, 1) }}
                          </div>
                          <div class="status">
                            {{ data.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.diPan[jgw[index - 1] - 1] }}
                          </div>
                          <div class="status">
                            {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                          </div>
                          <div class="status">
                            {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 精简模式 -->
                  <div class="reduce">
                    <div class="big" v-show="!jggMode">
                      <div class="small" v-for="index in 9" :key="index" @click="switchLuoGong(jgw[index - 1])">
                        <div>
                          <div class="yiKong">
                            <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                            <b class="xunKong">{{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1] }}</b>
                          </div>
                        </div>
                        <div>
                          <span class="core">
                            {{ data.shenPan[jgw[index - 1] - 1] }}
                          </span>
                        </div>
                        <div>
                          <div class="dun" v-if="data.jiuDun">
                            {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                          </div>
                        </div>
                        <div></div>
                        <div>
                          <div class="core">
                            {{ data.tianPan[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.tianPanQiYi[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div class="marki">
                          <span :class="jgs[index - 1]">
                            {{ jgm[index - 1] }}
                          </span>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.renPan[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.diPan[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="divider1"><el-divider /></div>

                <div class="option2">
                  <span class="left">
                    <el-button class="button" size="small" @click="shangXiaJu(false)">
                      <Icon type="ios-undo" />
                      上一局
                    </el-button>
                  </span>

                  <span class="button1">
                    <el-button class="button" size="small" type="info" @click="douZhuanXingYi">
                      <!-- <Icon type="ios-git-compare" /> -->
                      斗转星移
                      <!-- <Icon type="ios-git-compare" /> -->
                    </el-button>
                  </span>

                  <span class="right">
                    <el-button class="button" size="small" type="info" @click="shangXiaJu(true)">
                      下一局
                      <Icon type="ios-share-alt" />
                    </el-button>
                  </span>

                  <el-card shadow="always" class="douzhan">
                    <div class="jianju">
                      <b style="vertical-align: 2px;">模式：</b>
                      <el-radio v-for="item in douZhuanXingYiModeOptions" v-model="douZhuanXingYiMode"
                        :label="item.label" :key="item" style="width: 70px">
                        {{ item.value }}
                      </el-radio>
                    </div>
                    <div class="jianju2">
                      <b style="vertical-align: 2px;">类型：</b>
                      <el-radio v-for="item in douZhuanXingYiTypeOptions" v-model="douZhuanXingYiType"
                        :label="item.label" :key="item" style="width: 30px">
                        {{ item.value }}
                      </el-radio>
                    </div>
                  </el-card>

                </div>

              </el-card>
            </el-col>

            <!-- 基础信息 -->
            <el-col :span="9">
              <el-card shadow="always" class="foundation">
                <div class="paipan-mark">
                  {{ data.paiPanMark }}
                  <span class="switch">
                    <el-switch v-model="jggMode" inline-prompt active-text="详细" inactive-text="精简"
                      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #409eff" />
                  </span>
                </div>
                <div class="go1">
                  <span class="title">公历</span>
                  {{ data.solarStr }}
                </div>
                <div class="go2">
                  <span class="title">农历</span>
                  {{ data.lunarStr }}
                </div>

                <div class="go1">
                  <span class="title">干支</span>
                  <span v-if="data.baZi">
                    {{ data.baZi.join('&nbsp;&nbsp;') }}
                  </span>
                </div>
                <div class="go2">
                  <span class="title">五行</span>
                  <span v-if="data.baZiWuXing">
                    <span v-for="index in data.baZiWuXing.length" :key="index">
                      <span v-html="WuXingColor2(data.baZiWuXing[index - 1])"></span>&nbsp;
                    </span>
                  </span>
                </div>

                <div class="go1">
                  <span class="title">旬空</span>
                  <span v-if="data.baZiXunKong">
                    {{ data.baZiXunKong.join('&nbsp;&nbsp;') }}
                  </span>
                </div>
                <div class="go2">
                  <span class="title">纳音</span>
                  <span v-if="data.baZiNaYin">
                    {{ data.baZiNaYin.join('&nbsp;&nbsp;') }}
                  </span>
                </div>

                <div class="go4">
                  <div class="left">
                    <span class="title">节气</span>
                    {{ data.jieQi + data.sanYuan }}
                  </div>
                  <div class="right">
                    <span class="title">局数</span>
                    {{ data.yinYangDun + data.juShu }}局
                  </div>
                </div>

                <div class="go3">
                  <div class="left">
                    <span class="title">值符</span>
                    {{ data.zhiFu }}
                  </div>
                  <div class="right">
                    <span class="title">值使</span>
                    {{ data.zhiShi }}
                  </div>
                </div>

                <div class="go4">
                  <div class="left">
                    <span class="title">旬首</span>
                    {{ data.xunShou }}
                  </div>
                  <div class="right">
                    <span class="title">驿马</span>
                    <span v-if="null !== data.yiMa">{{ data.yiMa }}</span>
                    <span v-else class="null">暂无数据</span>
                  </div>
                </div>

                <div class="go3">
                  <div class="left">
                    <span class="title">天乙</span>
                    {{ data.tianYi }}
                  </div>
                  <div class="right">
                    <span class="title">地乙</span>
                    {{ data.diYi }}
                  </div>
                </div>

                <div class="go4">
                  <div class="left">
                    <span class="title">月将</span>
                    {{ data.yueJiang }}
                  </div>
                  <div class="right">
                    <span class="title">月将神</span>
                    {{ data.yueJiangShen }}
                  </div>
                </div>

              </el-card>
            </el-col>

          </el-row>

          <!-- 伏吟、反吟、六仪击邢、奇仪入暮 -->
          <el-card shadow="always" class="qita">
            <Tabs class="tabs">
              <TabPane :label="'伏吟（' + data.fuYin.length + '个）'" icon="ios-aperture" v-if="data.fuYin">
                <div v-if="data.fuYin.length !== 0">
                  {{ data.fuYin.join('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;') }}
                </div>
                <div v-else class="null center">暂无数据</div>
              </TabPane>
              <TabPane :label="'反吟（' + data.fanYin.length + '个）'" icon="ios-aperture-outline" v-if="data.fanYin">
                <div v-if="data.fanYin.length !== 0">
                  {{ data.fanYin.join('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;') }}
                </div>
                <div v-else class="null center">暂无数据</div>
              </TabPane>
              <TabPane :label="'六仪击邢（' + data.liuYiJiXing.length + '个）'" icon="ios-color-filter"
                v-if="data.liuYiJiXing">
                <div v-if="data.liuYiJiXing.length !== 0">
                  {{ data.liuYiJiXing.join('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;') }}
                </div>
                <div v-else class="null center">暂无数据</div>
              </TabPane>
              <TabPane :label="'奇仪入墓（' + data.qiYiRuMu.length + '个）'" icon="ios-color-filter-outline"
                v-if="data.qiYiRuMu">
                <div v-if="data.qiYiRuMu.length !== 0">
                  {{ data.qiYiRuMu.join('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;') }}
                </div>
                <div v-else class="null center">暂无数据</div>
              </TabPane>
            </Tabs>

          </el-card>

          <!-- 九宫切换按钮 -->
          <!-- <el-affix :offset="100"> -->
          <el-card shadow="always" class="gong-switch">
            <div class="button">
              <span v-for="index in luoGongTitle.length" :key="index">
                <span>
                  <el-button v-if="luoGongIndex === index" size="small" class="yes">
                    {{ luoGongTitle[index - 1] }}
                  </el-button>
                  <el-button v-else size="small" @click="switchLuoGong(index)" class="no">
                    {{ luoGongTitle[index - 1] }}
                  </el-button>
                </span>
              </span>
            </div>
          </el-card>
          <!-- </el-affix> -->

          <!-- 单宫数据 -->
          <el-card shadow="never" class="gong-info">
            <div class="dangong" v-if="dataStatus">
              <div class="title">
                <Icon type="md-send" />
                {{ luoGongTitle[luoGongIndex - 1].substring(0, 1) }}宫信息
              </div>
              <div class="divider1"><el-divider border-style="dashed" /></div>

              <!-- 转盘 -->
              <div v-if="data.paiPanType === 0">

                <div class="oneGong">
                  <div class="small">
                    <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                      <div class="yiKong">
                        <b class="yiMa">{{ data.yiMaGongMark[luoGongIndex - 1] }}</b>
                        <b class="xunKong">{{ data.liuJiaXunKongGongMark[luoGongIndex - 1] }}</b>
                      </div>
                    </div>
                    <div v-else></div>
                    <div>{{ data.shenPan[luoGongIndex - 1] }}</div>
                    <div>
                      <div class="dun">
                        <span v-for="index in data.jiuDun[luoGongIndex - 1].length" :key="index">
                          {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                        </span>
                      </div>
                    </div>
                    <div>{{ data.tianPanQiYiToTq[luoGongIndex - 1] }}</div>
                    <div>{{ data.tianPan[luoGongIndex - 1] }}</div>
                    <div v-if="luoGongIndex !== 5">{{ data.tianPanQiYiExTq[luoGongIndex - 1] }}</div>
                    <div v-else></div>
                    <div></div>
                    <div>{{ data.renPan[luoGongIndex - 1] }}</div>
                    <div>{{ data.diPan[luoGongIndex - 1] }}</div>
                  </div>
                  <div class="title-0">{{ luoGongTitle[luoGongIndex - 1] }}</div>
                </div>

                <div class="oneGong1" v-if="jiuGongDiZhi[luoGongIndex - 1].length !== 0">
                  <div class="small">
                    <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                      <div class="yiKong">
                        <b class="yiMa">{{ data.yiMaGongMark[luoGongIndex - 1] }}</b>
                        <b class="xunKong">{{ data.liuJiaXunKongGongMark[luoGongIndex - 1] }}</b>
                      </div>
                    </div>
                    <div v-else></div>
                    <div>{{ data.baShenLuoGongStatus[luoGongIndex - 1][1] }}</div>
                    <div>
                      <div class="dun">
                        <span v-for="index in data.jiuDun[luoGongIndex - 1].length" :key="index">
                          {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                        </span>
                      </div>
                    </div>
                    <div v-if="undefined !== data.tianPanQiYiLuoGongToTqLink[luoGongIndex - 1][0]">
                      {{ data.tianPanQiYiLuoGongToTqLink[luoGongIndex - 1][0][1] }}
                    </div>
                    <div v-else></div>
                    <div>{{ data.jiuXingLuoGongStatus[luoGongIndex - 1][1] }}</div>
                    <div>{{ data.tianPanQiYiLuoGongExTqLink[luoGongIndex - 1][0][1] }}</div>
                    <div></div>
                    <div>{{ data.baMenLuoGongStatus[luoGongIndex - 1][1] }}</div>
                    <div>{{ data.diPanQiYiLuoGongLink[luoGongIndex - 1][0][1] }}</div>
                  </div>
                  <div class="title-1">{{ jiuGongDiZhi[luoGongIndex - 1][0] }}</div>
                </div>

                <div class="oneGong1" v-if="jiuGongDiZhi[luoGongIndex - 1].length > 1">
                  <div class="small">
                    <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                      <div class="yiKong">
                        <b class="yiMa">{{ data.yiMaGongMark[luoGongIndex - 1] }}</b>
                        <b class="xunKong">{{ data.liuJiaXunKongGongMark[luoGongIndex - 1] }}</b>
                      </div>
                    </div>
                    <div v-else></div>
                    <div>{{ data.baShenLuoGongStatus[luoGongIndex - 1][1] }}</div>
                    <div>
                      <div class="dun">
                        <span v-for="index in data.jiuDun[luoGongIndex - 1].length" :key="index">
                          {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                        </span>
                      </div>
                    </div>
                    <div v-if="undefined !== data.tianPanQiYiLuoGongToTqLink[luoGongIndex - 1][0]">
                      {{ data.tianPanQiYiLuoGongToTqLink[luoGongIndex - 1][0][1] }}
                    </div>
                    <div v-else></div>
                    <div>{{ data.jiuXingLuoGongStatus[luoGongIndex - 1][1] }}</div>
                    <div>{{ data.tianPanQiYiLuoGongExTqLink[luoGongIndex - 1][1][1] }}</div>
                    <div></div>
                    <div>{{ data.baMenLuoGongStatus[luoGongIndex - 1][1] }}</div>
                    <div>{{ data.diPanQiYiLuoGongLink[luoGongIndex - 1][1][1] }}</div>
                  </div>
                  <div class="title-1">{{ jiuGongDiZhi[luoGongIndex - 1][1] }}</div>
                </div>

                <div class="yueLing" v-if="luoGongIndex !== 5">
                  <div class="small">
                    <div v-if="null !== data.baGuaWangShuai[luoGongIndex - 1]">
                      {{ data.baGuaWangShuai[luoGongIndex - 1][0] + '：' + data.baGuaWangShuai[luoGongIndex - 1][1] }}
                    </div>
                    <div v-if="null !== data.jiuXingWangShuai[luoGongIndex - 1]">
                      {{ data.jiuXingWangShuai[luoGongIndex - 1][0] + '：' + data.jiuXingWangShuai[luoGongIndex - 1][1]
                      }}
                    </div>
                    <div v-if="null !== data.baMenWangShuai[luoGongIndex - 1]">
                      {{ data.baMenWangShuai[luoGongIndex - 1][0] + '：' + data.baMenWangShuai[luoGongIndex - 1][1] }}
                    </div>
                  </div>
                  <div class="title-2">月令</div>
                </div>
              </div>

              <!-- 飞盘 -->
              <div v-if="data.paiPanType === 1">

                <div class="oneGong">
                  <div class="small">
                    <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                      <div class="yiKong">
                        <b class="yiMa">{{ data.yiMaGongMark[luoGongIndex - 1] }}</b>
                        <b class="xunKong">{{ data.liuJiaXunKongGongMark[luoGongIndex - 1] }}</b>
                      </div>
                    </div>
                    <div v-else></div>
                    <div>{{ data.shenPan[luoGongIndex - 1] }}</div>
                    <div>
                      <div class="dun">
                        <span v-for="index in data.jiuDun[luoGongIndex - 1].length" :key="index">
                          {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                        </span>
                      </div>
                    </div>
                    <div></div>
                    <div>{{ data.tianPan[luoGongIndex - 1] }}</div>
                    <div>{{ data.tianPanQiYi[luoGongIndex - 1] }}</div>
                    <div></div>
                    <div>
                      <span v-if="data.renPan[luoGongIndex - 1] === ''">-</span>
                      <span v-else>{{ data.renPan[luoGongIndex - 1] }}</span>
                    </div>
                    <div>{{ data.diPan[luoGongIndex - 1] }}</div>
                  </div>
                  <div class="title-0">{{ luoGongTitle[luoGongIndex - 1] }}</div>
                </div>

                <div class="oneGong1" v-if="jiuGongDiZhi[luoGongIndex - 1].length !== 0">
                  <div class="small">
                    <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                      <div class="yiKong">
                        <b class="yiMa">{{ data.yiMaGongMark[luoGongIndex - 1] }}</b>
                        <b class="xunKong">{{ data.liuJiaXunKongGongMark[luoGongIndex - 1] }}</b>
                      </div>
                    </div>
                    <div v-else></div>
                    <div>{{ data.jiuShenLuoGongStatus[luoGongIndex - 1][1] }}</div>
                    <div>
                      <div class="dun">
                        <span v-for="index in data.jiuDun[luoGongIndex - 1].length" :key="index">
                          {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                        </span>
                      </div>
                    </div>
                    <div></div>
                    <div>{{ data.jiuXingLuoGongStatus[luoGongIndex - 1][1] }}</div>
                    <div>{{ data.tianPanQiYiLuoGongLink[luoGongIndex - 1][0][1] }}</div>
                    <div></div>
                    <div>
                      <span v-if="data.renPan[luoGongIndex - 1] === '中门'">-</span>
                      <span v-else>{{ data.baMenLuoGongStatus[luoGongIndex - 1][1] }}</span>
                    </div>
                    <div>{{ data.diPanQiYiLuoGongLink[luoGongIndex - 1][0][1] }}</div>
                  </div>
                  <div class="title-1">{{ jiuGongDiZhi[luoGongIndex - 1][0] }}</div>
                </div>

                <div class="oneGong1" v-if="jiuGongDiZhi[luoGongIndex - 1].length > 1">
                  <div class="small">
                    <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                      <div class="yiKong">
                        <b class="yiMa">{{ data.yiMaGongMark[luoGongIndex - 1] }}</b>
                        <b class="xunKong">{{ data.liuJiaXunKongGongMark[luoGongIndex - 1] }}</b>
                      </div>
                    </div>
                    <div v-else></div>
                    <div>{{ data.jiuShenLuoGongStatus[luoGongIndex - 1][1] }}</div>
                    <div>
                      <div class="dun">
                        <span v-for="index in data.jiuDun[luoGongIndex - 1].length" :key="index">
                          {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                        </span>
                      </div>
                    </div>
                    <div></div>
                    <div>{{ data.jiuXingLuoGongStatus[luoGongIndex - 1][1] }}</div>
                    <div>{{ data.tianPanQiYiLuoGongLink[luoGongIndex - 1][1][1] }}</div>
                    <div></div>
                    <div>
                      <span v-if="data.renPan[luoGongIndex - 1] === '中门'">-</span>
                      <span v-else>{{ data.baMenLuoGongStatus[luoGongIndex - 1][1] }}</span>
                    </div>
                    <div>{{ data.diPanQiYiLuoGongLink[luoGongIndex - 1][1][1] }}</div>
                  </div>
                  <div class="title-1">{{ jiuGongDiZhi[luoGongIndex - 1][1] }}</div>
                </div>

                <div class="yueLing">
                  <div class="small">
                    <div v-if="null !== data.baGuaWangShuai[luoGongIndex - 1]">
                      <span v-if="luoGongIndex === 5">-</span>
                      <span v-else>
                        {{ data.baGuaWangShuai[luoGongIndex - 1][0] + '：' + data.baGuaWangShuai[luoGongIndex - 1][1] }}
                      </span>
                    </div>
                    <div v-if="null !== data.jiuXingWangShuai[luoGongIndex - 1]">
                      {{ data.jiuXingWangShuai[luoGongIndex - 1][0] + '：' + data.jiuXingWangShuai[luoGongIndex - 1][1]
                      }}
                    </div>
                    <div v-if="null !== data.baMenWangShuai[luoGongIndex - 1]">
                      <span
                        v-if="data.baMenWangShuai[luoGongIndex - 1][0] === '中门' || data.baMenWangShuai[luoGongIndex - 1][0] === ''">
                        -
                      </span>
                      <span v-else>
                        {{ data.baMenWangShuai[luoGongIndex - 1][0] + '：' + data.baMenWangShuai[luoGongIndex - 1][1] }}
                      </span>
                    </div>
                  </div>
                  <div class="title-2">月令</div>
                </div>
              </div>

              <div class="divider2"><el-divider border-style="dashed" /></div>

              <!-- 克应、静应、动应 -->
              <Tabs>
                <TabPane label="十干克应" icon="ios-apps" v-if="data.shiGanKeYing">
                  <div v-if="data.shiGanKeYing[luoGongIndex - 1][0] !== ''">
                    <div v-for="sgky in data.shiGanKeYing[luoGongIndex - 1].length" :key="sgky">
                      {{ data.shiGanKeYing[luoGongIndex - 1][sgky - 1] }}
                    </div>
                  </div>
                  <div v-else class="null center">暂无数据</div>
                </TabPane>
                <TabPane label="八门克应" icon="ios-apps" v-if="data.baMenKeYing">
                  <div v-if="data.baMenKeYing[luoGongIndex - 1][0] !== ''">
                    <div v-for="sgky in data.baMenKeYing[luoGongIndex - 1].length" :key="sgky">
                      {{ data.baMenKeYing[luoGongIndex - 1][sgky - 1] }}
                    </div>
                  </div>
                  <div v-else class="null center">暂无数据</div>
                </TabPane>
                <TabPane label="八门静应" icon="ios-apps" v-if="data.baMenJingYing">
                  <div v-if="data.baMenJingYing[luoGongIndex - 1][0] !== ''">
                    <div v-for="bmjy in data.baMenJingYing[luoGongIndex - 1].length" :key="bmjy">
                      {{ data.baMenJingYing[luoGongIndex - 1][bmjy - 1] }}
                    </div>
                  </div>
                  <div v-else class="null center">暂无数据</div>
                </TabPane>
                <TabPane label="八门动应" icon="ios-apps" v-if="data.baMenDongYing">
                  <div v-if="data.baMenDongYing[luoGongIndex - 1][0] !== ''">
                    <div v-for="bmdy in data.baMenDongYing[luoGongIndex - 1].length" :key="bmdy">
                      {{ data.baMenDongYing[luoGongIndex - 1][bmdy - 1] }}
                    </div>
                  </div>
                  <div v-else class="null center">暂无数据</div>
                </TabPane>
                <TabPane label="星门克应" icon="ios-apps" v-if="data.xingMenKeYing">
                  <div v-if="data.xingMenKeYing[luoGongIndex - 1][0] !== ''">
                    <div v-for="xmky in data.xingMenKeYing[luoGongIndex - 1].length" :key="xmky">
                      {{ data.xingMenKeYing[luoGongIndex - 1][xmky - 1] }}
                    </div>
                  </div>
                  <div v-else class="null center">暂无数据</div>
                </TabPane>
                <TabPane label="九星时应" icon="ios-apps" v-if="data.jiuXingShiYing">
                  <div v-if="data.jiuXingShiYing[luoGongIndex - 1][0] !== ''">
                    <div v-for="jxsy in data.jiuXingShiYing[luoGongIndex - 1].length" :key="jxsy">
                      {{ data.jiuXingShiYing[luoGongIndex - 1][jxsy - 1] }}
                    </div>
                  </div>
                  <div v-else class="null center">暂无数据</div>
                </TabPane>
              </Tabs>

            </div>
          </el-card>

        </div>

      </div>

    </div>

    <!-- 高级选项窗口 -->
    <el-dialog v-model="seniorDialog" width="500" :lock-scroll="false" style="border-radius: 26px;"
      class="senior-dialog">
      <template #header>
        <span class="header-senior">高级选项</span>
      </template>
      <el-card shadow="always" class="senior-card">
        <div class="t-senior">四柱选项</div>
        <div>
          年柱&nbsp;
          <el-select v-model="yearGanZhiSet" style="width: 87%" size="small">
            <el-option v-for="item in yearGanZhiSetOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 1" style="float:right; color:#8492a6;font-size:12px; margin-right:-15px;">
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          月柱&nbsp;
          <el-select v-model="monthGanZhiSet" style="width: 87%" size="small">
            <el-option v-for="item in monthGanZhiSetOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 1" style="float:right; color:#8492a6;font-size:12px; margin-right:-15px;">
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          日柱&nbsp;
          <el-select v-model="dayGanZhiSet" style="width: 87%" size="small">
            <el-option v-for="item in dayGanZhiSetOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 1" style="float:right; color:#8492a6;font-size:12px; margin-right:-15px;">
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          时柱&nbsp;
          <el-select v-model="hourGanZhiSet" style="width: 87%" size="small">
            <el-option v-for="item in hourGanZhiSetOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 0" style="float:right; color:#8492a6;font-size:12px; margin-right:-15px;">
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
      </el-card>
      <el-card shadow="always" class="senior-card">
        <div class="t-senior">通用选项</div>
        <div>
          节气排法&nbsp;
          <el-select v-model="jieQi" style="width: 80%" size="small">
            <el-option v-for="item in jieQiOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 0" style="float:right; color:#8492a6;font-size:12px; margin-right:-15px;">
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          值使排法&nbsp;
          <el-select v-model="zhiShi" style="width: 80%" size="small">
            <el-option v-for="item in zhiShiOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 0" style="float:right; color:#8492a6;font-size:12px; margin-right:-15px;">
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
      </el-card>
      <el-card shadow="always" class="senior-card mt-10" v-if="paiPanType === 1">
        <div class="t-senior">飞盘奇门选项</div>
        <div>
          人盘排法&nbsp;
          <el-select v-model="renPanFeiZhuan" style="width: 80%" size="small">
            <el-option v-for="item in renPanFeiZhuanOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 1" class="moren"> 默认 </span>
            </el-option>
          </el-select>
        </div>
        <div v-if="renPanFeiZhuan === 0">
          人盘转宫法&nbsp;
          <el-select v-model="renPanZhuanGong" style="width: 76.5%" size="small">
            <el-option v-for="item in renPanZhuanGongOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 0" class="moren"> 默认 </span>
            </el-option>
          </el-select>
        </div>
        <div v-if="renPanFeiZhuan === 1">
          人盘飞宫法&nbsp;
          <el-select v-model="renPanFeiGong" style="width: 76.5%" size="small">
            <el-option v-for="item in renPanFeiGongOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 0" class="moren"> 默认 </span>
            </el-option>
          </el-select>
        </div>
        <div>
          天盘飞宫法&nbsp;
          <el-select v-model="tianPanFeiGong" style="width: 76.5%" size="small">
            <el-option v-for="item in tianPanFeiGongOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 0" class="moren"> 默认 </span>
            </el-option>
          </el-select>
        </div>
        <div>
          神盘飞宫法&nbsp;
          <el-select v-model="shenPanFeiGong" style="width: 76.5%" size="small">
            <el-option v-for="item in shenPanFeiGongOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 1" class="moren"> 默认 </span>
            </el-option>
          </el-select>
        </div>
      </el-card>
      <template #footer>
        <div class="dialog-footer center">
          <Button @click="seniorDialog = false" style="width: 100%; border-radius: 10px"> 确定 </Button>
        </div>
      </template>
    </el-dialog>

    <!-- 四柱转日期弹窗 -->
    <el-dialog v-model="siZhuDialog" width="600" :lock-scroll="false" style="border-radius: 26px" class="sizhu-dialog">
      <template #header>
        <span class="header-sizhu">四柱转日期</span>
      </template>
      <el-card shadow="always" class="sizhu-card">
        <div v-if="siZhuToDateTotal === 0">
          <div>
            年份范围：
            <input class="year-input mouse-text" placeholder="请输入起始年份" v-model="beginYear" />
            ~ 至今
            <a class="sizhu-res" @click="beginYear = 1900">重置</a>
          </div>
          <div>
            年柱：
            <el-select placement="right" v-model="yearGanZhi" style="width: 240px" placeholder="请选择年柱（年干支）"
              size="small">
              <el-option v-for="item in ganZhiOptions" :key="item.value" :label="item.label" :value="item.value">
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span v-if="item.label === yearGanZhi2"
                  style="float: right; color: #8492a6; font-size: 12px; margin-right: -10px">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前年柱（年干支）
                </span>
              </el-option>
            </el-select>
          </div>
          <div>
            月柱：
            <el-select placement="right" v-model="monthGanZhi" style="width: 240px" placeholder="请选择月柱（月干支）"
              size="small">
              <el-option v-for="item in ganZhiOptions" :key="item.value" :label="item.label" :value="item.value">
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span v-if="item.label === monthGanZhi2"
                  style="float: right; color: #8492a6; font-size: 12px; margin-right: -10px">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前月柱（月干支）
                </span>
              </el-option>
            </el-select>
          </div>
          <div>
            日柱：
            <el-select placement="right" v-model="dayGanZhi" style="width: 240px" placeholder="请选择日柱（日干支）" size="small">
              <el-option v-for="item in ganZhiOptions" :key="item.value" :label="item.label" :value="item.value">
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span v-if="item.label === dayGanZhi2"
                  style="float: right; color: #8492a6; font-size: 12px; margin-right: -10px">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前日柱（日干支）
                </span>
              </el-option>
            </el-select>
          </div>
          <div>
            时柱：
            <el-select placement="right" v-model="hourGanZhi" style="width: 240px" placeholder="请选择时柱（时干支）"
              size="small">
              <el-option v-for="item in ganZhiOptions" :key="item.value" :label="item.label" :value="item.value">
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span v-if="item.label === hourGanZhi2"
                  style="float: right; color: #8492a6; font-size: 12px; margin-right: -10px">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前时柱（时干支）
                </span>
              </el-option>
            </el-select>
          </div>
        </div>
        <div v-else>
          <Table height="300" size="small" highlight-row :columns="siZhuToDateColumns" :data="siZhuToDate">
            <template #action="{ row, index }">
              <Button type="primary" size="small" @click="setNewDate(row.solar)">选择</Button>
            </template>
          </Table>
          <div class="count">
            从公元{{ beginYear2 }}年~至今共&nbsp;{{ siZhuToDateTotal }}&nbsp;条日期
            【{{ yearGanZhi2 + '&nbsp;' + monthGanZhi2 + '&nbsp;' + dayGanZhi2 + '&nbsp;' + hourGanZhi2 }}】
          </div>
        </div>
      </el-card>
      <template #footer>
        <div class="dialog-footer center">
          <span v-if="siZhuToDateTotal === 0">
            <Button v-if="!siZhuButton" @click="getSiZhuToDate" style="width: 100%; border-radius: 10px">获取日期</Button>
            <Button v-else loading style="width: 100%; border-radius: 10px">日期获取中...</Button>
          </span>
          <Button v-else @click="siZhuToDateTotal = 0" style="width: 100%; border-radius: 10px"> 重新获取 </Button>
        </div>
      </template>
    </el-dialog>

  </div>

</template>

<style scoped lang="less" src="@/css/gongju/qimenpaipan.scss"></style>
